<template>
	<cl-page statusBarBackground="#fff" background-color="#F1F1F1" :fullscreen="true">
		<cl-sticky>
			<cl-topbar :border="false" background-color="#fff" color="#333" title="个人信息" />
		</cl-sticky>
		<view class="page-info animate__animated animate__fadeIn">
			<view class="card mt30">
				<view class="flex align-center">
					<image class="avatar" src="/static/images/avatar.jpg" mode="aspectFill"></image>
					<view>
						<view class="name">{{ user.info.userName }}</view>
						<view class="idcard">1****************8</view>
					</view>
				</view>
				<view class="flex align-center text">
					<image class="icon" src="/static/images/anquan.png" mode="aspectFill"></image>
					{{ $t("user.info.text") }}
				</view>
			</view>
			<view class="list mt30">
				<view class="item flex flex-between align-center">
					<view class="left">{{ $t("user.info.userinfo") }}</view>
					<view class="right">{{ user.info.userName }}</view>
				</view>
				<view class="item flex flex-between align-center">
					<view class="left">{{ $t("user.info.sex") }}</view>
					<view class="right">{{ $t("user.info.girl") }}</view>
				</view>
			</view>
			<view class="list mt30">
				<view class="item flex flex-between align-center">
					<view class="left">{{ $t("user.info.cardtype") }}</view>
					<view class="right">{{ $t("user.info.idcard") }}</view>
				</view>
				<view class="item flex flex-between align-center">
					<view class="left">{{ $t("user.info.cardnum") }}</view>
					<view class="right">112334 19880908 1238</view>
				</view>
				<view class="item flex flex-between align-center">
					<view class="left">{{ $t("user.info.validity") }}</view>
					<view class="right">2028-12-08</view>
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user } = useStore();
const ui = useUi();
const app = useApp();
</script>

<style lang="scss" scoped>
.page-info {
	.list {
		width: 100%;
		background: #ffffff;
		padding: 0 30rpx;
		box-sizing: border-box;

		.item {
			height: 88rpx;
			border-bottom: 1rpx solid #e5e5e5;

			&:last-child {
				border-bottom: none;
			}

			.left {
				font-family: SourceHanSansCN;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}

			.right {
				font-family: SourceHanSansCN;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.card {
		width: 690rpx;
		height: 380rpx;
		// background: #1981f8;
		background-image: url("/static/images/cardbg2.png");
		background-size: 100% 100%;
		border-radius: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
		margin: 30rpx auto;
		box-shadow: 0 0.3125rem 0.625rem 0 rgba(170, 170, 170, 0.5);

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border: 4rpx solid #fff;
			border-radius: 50%;
			margin-right: 40rpx;
		}

		.name {
			font-family: SourceHanSansCN;
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
		}

		.idcard {
			font-family: SourceHanSansCN;
			font-weight: 400;
			font-size: 24rpx;
			color: #ffffff;
			margin-top: 10rpx;
		}

		.text {
			font-family: SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			margin-top: 170rpx;

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}
}
</style>
